import { Drawer, Avatar, Divider, Col, Row } from 'antd';
import { observer } from 'mobx-react';
import { userStore } from '../../stores/UserStore';
import { useState } from 'react';
import { AvatarUpload } from './Upload';
import './Profile.scss';
import { settingStore, SettingsType } from '../../stores/SettingStore';
import { ChangePassword } from './ChangePassword';
import { EditModal } from './Edit';
import { EditSingleModal } from './EditSingle';
import Icons from '../../images/images';

interface DescriptionItemProps {
    title: string,
    content: any
}

const DescriptionItem = (props: DescriptionItemProps) => (
    <div className="site-description-item-profile-wrapper">
        <p className="site-description-item-profile-p-label">{props.title}:</p>
        {props.content}
    </div>
);

export const Profile = observer((props: any) => {
    const [visible, setVisible] = useState(false);


    const showDrawer = () => {
        setVisible(true)
    };

    const onClose = () => {
        setVisible(false)
    };
    console.log("store.type", userStore.userInfo)
    return (
        <>
            <div className="profile" onClick={showDrawer}>
                <Avatar src={userStore.userInfo?.avatar} />
                {/* <img className='avatar' src={userStore.userInfo?.avatar} alt="" /> */}
                <div className="name">{userStore.userInfo?.username}</div>
                {userStore.userInfo?.subscription && <img className='vip' src={Icons.vip} alt="" onClick={() => settingStore.type = SettingsType.username} />}

            </div>

            <Drawer
                width={400}
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
            >
                <div className="avatar" >
                    <AvatarUpload />
                    <div className="content">
                        <div className="info">
                            <div className="name">{userStore.userInfo?.username}</div>
                            <img className='edit' src={Icons.edit} alt="" onClick={() => {
                                settingStore.editSingleModalVisible = true;
                                settingStore.editType = 'username';
                            }} />
                        </div>
                        {userStore.userInfo?.subscription && <img className='vip' src={Icons.vip} alt="" onClick={() => settingStore.type = SettingsType.username} />}
                    </div>

                </div>
                <div className="divider">
                    <div className="text">基础信息</div>
                    <div className="line"></div>
                    <div className="edit" onClick={() => settingStore.editModalVisible = true}>
                        <img  src={Icons.edit} alt="" onClick={() => settingStore.type = SettingsType.username} />
                        <span>编辑资料</span>
                    </div>
                </div>
                <Row>

                    <Col span={12}>
                        <DescriptionItem title="性别" content={userStore.userInfo?.sex === '1' ? '男' : '女'} />
                    </Col>
                    <Col span={12}>
                        <DescriptionItem title="生日" content={userStore.userInfo?.birthday || '暂未设置'} />
                    </Col>
                </Row>

                <Row>
                    <DescriptionItem title="简介" content={userStore.userInfo?.profile || '这家伙很懒，什么都没留下...'} />
                </Row>
                <div className="divider">
                    <div className="text">账号安全</div>
                    <div className="line"></div>
                </div>

                <Row>
                    <div className="security">
                        <div className='left'>
                            <img className='icon' src={Icons.phone} alt="" />
                            <div className="info">
                                <div>修改绑定手机</div>
                                {userStore.userInfo?.phone ? <div>已绑定：{userStore.userInfo?.phone}</div> :
                                    <div>暂未绑定</div>}
                            </div>
                        </div>
                        <div className="button" onClick={() => {
                            settingStore.editSingleModalVisible = true;
                            settingStore.editType = 'phone';
                        }}>
                            <div>修改手机</div>
                            <img src={Icons.arrow} alt="" />
                        </div>
                    </div>
                </Row>


                <Row>
                    <div className="security">
                        <div className='left'>
                            <img className='icon' src={Icons.password} alt="" />
                            <div className="info">
                                <div>修改密码</div>
                                <div>定期修改密码，保证账号安全</div>
                            </div>
                        </div>

                        <div className="button" onClick={() => settingStore.passwordModalVisible = true}>
                            <div>修改密码</div>
                            <img src={Icons.arrow} alt="" />
                        </div>
                    </div>
                </Row>
                <Divider />
                <Row>
                    <div className='logout' onClick={() => userStore.logout()}>
                        <img className='icon' src={Icons.logout} alt="" />
                        <div>退出</div>
                    </div>
                </Row>



            </Drawer>
            <ChangePassword visible={settingStore.passwordModalVisible} cancle={() => { settingStore.passwordModalVisible = false }} />
            <EditModal visible={settingStore.editModalVisible} cancle={() => { settingStore.editModalVisible = false }} />
            <EditSingleModal visible={settingStore.editSingleModalVisible} cancle={() => { settingStore.editSingleModalVisible = false }} />

        </>
    );
});
